<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title><fmt:message key='login.title'/> </title>
<link rel="stylesheet" type="text/css" href="styles/login/style.css" />
<link rel="stylesheet" type="text/css" media="screen" href="styles/grid/css/ui-lightness/jquery-ui-1.8.17.custom.css" />
<script type="text/javascript" src="styles/login/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="styles/support/indec.js"></script>
<script type="text/javascript">
$(document).ready(function() {

	$("#login").click(function() {
	
		var action = $("#form1").attr('action');
		var form_data = {
			username: $("#username").val(),
			password: $("#password").val(),
			is_ajax: 1
		};
		
		$.ajax({
			type: "POST",
			url: action,
			data: form_data,
			dataType:"html",
			success: function(response)
			{
				if(response == 'menuPolls.jsp')
				{
					window.location.href = "menuPolls.jsp";
					return false;
				}
				else if(response == 'badCredentials')
				{
					$("#message").html($("#badCredentialsMsge").val());	
					setTimeout(function(){ $("#message").fadeIn(500);},500);
					setTimeout(function(){ $("#message").fadeOut(5000);},5500);
					return false;
				}
				else if(response == 'noSession')
				{
					$("#message").html($("#noSessionMsge").val());
					setTimeout(function(){ $("#message").fadeIn(500);},500);
					setTimeout(function(){ $("#message").fadeOut(5000);},5500);
					return false;
				}
				else if(response == 'systemErrorMsge')
				{
					$("#message").html($("#systemErrorMsge").val());
					setTimeout(function(){ $("#message").fadeIn(500);},500);
					return false;
				}
			},
			error:function() 
			{
				$("#message").html($("#systemErrorMsge").val());
				setTimeout(function(){ $("#message").fadeIn(500);},500);
				return false;
			}
		});
		return false;
	});	

	if($("#message").html() == "")
	{		
		return false;
	}
	
});
</script>
</head>

<body onload="if(self.location != top.location){top.location.href='login.jsp';}" >
<img src="<%=request.getContextPath()%>/styles/img/logo.png" width="1025" height="100" alt="Logo" style="margin-left:120px; padding-bottom: 150px; margin-top:20px"/>
<input type="hidden" id="badCredentialsMsge" name="badCredentialsMsge" value="<fmt:message key='login.badCredentiales.message'/>"/>
<input type="hidden" id="noSessionMsge" name="noSessionMsge" value="<fmt:message key='login.noSession.message'/>"/>
<input type="hidden" id="systemErrorMsge" name="systemErrorMsge" value="<fmt:message key='login.systemError.message'/>"/>


<div id="content" class="loginBox">
 <!--  <img src="styles/img/logo_indec.jpg" width="220" height="83" alt="Logo INDEC" /> -->
	  <form id="form1" name="form1" method="post" action="./login?option=validateUser">
		 
		    <p>
		      <label for="username"><fmt:message key='login.user'/></label>
		      <input type="text" name="username" id="username" />
		    </p>
		    <p>
		      <label for="password"><fmt:message key='login.pass'/></label>
		      <input type="password" name="password" id="password" />
		    </p>   
		   <div style="text-align: center">
		    	<input type="submit" id="login" style="height:30px;" class="fg-button ui-state-default ui-corner-all" name="login" value="<fmt:message key='login.button'/>" />
		   </div> 
		    
	  </form>
	    <div id="message" style="brackground-color: none">
	    </div>
</div>
</body>
</html>